<script setup lang="ts">
import { onMounted } from 'vue'
const props = defineProps<{
  // 选项列表
  options: {
    label: string
    value: string | number
  }[]
  modelValue?: string | number // 选中值
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: string | number): void
}>()

const chooseOption = (val: string | number) => {
  emit('update:modelValue', val)
}

onMounted(() => {
  // 在组件第一次渲染时，判断有没有初始选中值
  if (!props.options.findIndex((option) => option.value === props.modelValue)) {
    // 没有，就触发自定义事件，默认选中第一项
    chooseOption(props.options[0].value)
  }
})
</script>

<template>
  <!-- 单选列表 -->
  <div class="cp-radio-btn">
    <a
      v-for="option in options"
      :key="option.value"
      class="item"
      :class="modelValue === option.value && 'active'"
      @click.prevent="chooseOption(option.value)"
      >{{ option.label }}</a
    >
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 70px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
